<template>
  <div ref="box" class="">
    <div
      class="content-main-box"
      :style="{ width: `${width}px`, height: `${height}px` }"
    >
      <svg
        data-tip="球场"
        id="layer-site"
        class="animation-svg"
        viewBox="0 0 820 186"
      >
      </svg>
      <svg class="animatÍon-svg" viewBox="0 0 820 186"></svg>
      <svg class="animation-svg" viewBox="0 0 820 186"></svg>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useElementSize } from "@vueuse/core";
import { onMounted, Ref, ref, watchEffect } from "vue";
import { SnapTest } from "../../scripts/SnapTest";

const box = ref(null);
const height: Ref<number> = ref(200);
const { width } = useElementSize(box);
watchEffect(() => {
  if (width.value < 384.375) {
    width.value = 384.375;
  }
  height.value = width.value / 4.40859;
});

let testCtx: SnapTest;
onMounted(() => {
  testCtx = new SnapTest("#layer-site");
  testCtx.svgelement();
});
</script>

<style scoped>
.content-main-box {
  position: absolute;
  display: flex;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transition: all 0.1s ease;
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  position: absolute;
  left: 50%;
  top: 50%;
  /* background-color: yellow; */
}
.animation-svg {
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>
